<div class="cad-parts-list">
  <apes-table #basicTable [apesFrontPagination]="false" apesBordered
              [apesNoResult]="'无数据'" [apesData]="listOfData" [apesLoading]="isLoading"
              [apesScroll]="{ y: '70vh' }">
    <thead>
    <tr>

      <th apesWidth="5%">位置</th>
      <th apesWidth="11%">OE号</th>
      <th apesWidth="12%">零件名称</th>
      <th apesWidth="12%">标准配件名称</th>
      <th apesWidth="4%">用量</th>
      <th apesWidth="12%">备注</th>
      <th apesWidth="14%">型号</th>
      <th apesWidth="13%">OE描述</th>
      <th apesWidth="6%">4S参考价</th>
      <th apesWidth="12%">操作</th>

    </tr>
    </thead>
    <tbody id="bodyTest">
    <ng-template ngFor let-data [ngForOf]="basicTable.data">
      <tr [id]="filterSN(data.imageSN)" [ngClass]="{'cad-selected-parts':data.activate}"
          (click)="checkPart(data.imageSN)">
        <td apesBreakWord class="cad-parts-list-td">{{ data.imageSN }}</td>
        <td apesBreakWord class="cad-parts-list-td">{{ data.partCode }}</td>
        <td apesBreakWord class="cad-parts-list-td">{{ filterName(data.partName)}}</td>
        <td apesBreakWord class="cad-parts-list-td">{{ showPartsName(data.parts)}}</td>
        <td apesBreakWord class="cad-parts-list-td">{{ data.quantity }}</td>
        <td apesBreakWord class="cad-parts-list-td" (click)="checkNotes($event,data.notes)"
            [innerHTML]="filterName(data.notes)"></td>
        <!--<td apesBreakWord style="word-break: break-all;white-space: pre-wrap;">{{filterName(data.notes)}}</td>-->
        <td apesBreakWord class="cad-parts-list-td">{{ filterName(data.modelNotes) }}</td>
        <td apesBreakWord class="cad-parts-list-td">{{ data.OEMS }}</td>
        <td apesBreakWord class="cad-parts-list-td">
          <span *ngIf="data.price != null && data.price != undefined">¥</span>
          {{ data.price }}
        </td>
        <td class="cad-parts-list-td">
          <apes-badge *ngIf="!publicPage" [apesCount]="checkShopData(data)" [apesStyle]="{'right': '-9px'}">
            <button apes-button style="padding: 0 15px;margin: 0 8px 0 3px;" [disabled]="!data.partCode"
                    [apesType]="'primary'"
                    (click)="orderParts($event,data)">
              <i style="font-size: 16px;" apes-icon apesType="medicine-box"></i>
            </button>
          </apes-badge>
          <button apes-button style="padding: 0 8px;top: 3px;" [disabled]="data.parts && data.parts.length == 0"
                  [apesType]="'primary'"
                  (click)="errorCorrection($event,data)">
            纠错
          </button>

        </td>

      </tr>
    </ng-template>
    </tbody>
  </apes-table>

  <div *ngIf="!publicPage" class="cad-parts-tip">提示：部分“位置”下可能存在不同的OE号，选择配件时任选其中一个OE号都可以进行询价，由供应商进行判断。</div>

  <apes-modal [(apesVisible)]="isVisible"
              apesTitle="配件名称纠错"
              [apesFooter]="modalFooter"
              (apesOnCancel)="handleCancel()">
    <textarea apes-input placeholder="请描述正确的配件名称" [(ngModel)]="remark" apesAutosize></textarea>
    <ng-template #modalFooter>
      <button apes-button apesType="default" (click)="handleCancel()">取消</button>
      <button apes-button apesType="primary" [disabled]="remark == ''" (click)="handleOk()">确定</button>
    </ng-template>
  </apes-modal>
</div>
